<template>
  <div class="tabBar">
<el-row class="tac">
  <el-col>
    <br>
    <el-menu
      :router="true"
      default-active="personData"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
<el-menu-item index="personData">
  <template slot="title">
    <i class="el-icon-user"></i>
      <span>个人资料</span>
  </template>
<!-- <el-menu-item-group>
    <template slot="title">分组一</template>
    <el-menu-item index="1-1">选项1</el-menu-item>
    <el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
    <el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
    <template slot="title">选项4</template>
    <el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu> -->
</el-menu-item>
<el-menu-item index="mesBox">
    <i class="el-icon-message"></i>
    <span slot="title">消息中心</span>
</el-menu-item>
<el-menu-item index="artCommit">
    <i class="el-icon-document"></i>
    <span slot="title">上传文章</span>
</el-menu-item>
<el-menu-item index="adminHome">
    <i class="el-icon-thumb"></i>
    <span slot="title">权限申请</span>
</el-menu-item>
<el-menu-item index="adminReq" disabled>
    <i class="el-icon-loading"></i>
    <span slot="title">功能开发中...</span>
</el-menu-item>
<el-menu-item index="adminReq" disabled>
    <i class="el-icon-loading"></i>
    <span slot="title">功能开发中...</span>
</el-menu-item>
<el-menu-item index="adminReq" disabled>
    <i class="el-icon-loading"></i>
    <span slot="title">功能开发中...</span>
</el-menu-item>
<el-menu-item index="adminReq" disabled>
    <i class="el-icon-loading"></i>
    <span slot="title">功能开发中...</span>
</el-menu-item>
<el-menu-item @click="backUseHome">
    <i class="el-icon-back"></i>
    <span slot="title">返回上一级</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</div>
</template>

<script>
    export default {
        name: 'tabBar',
        components: {},
        data() {
            return {

            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //返回标注界面
            backUseHome() {
                this.$router.push('/userHome');
            }
        }
    }
</script>

<style scoped>
    .tac {
        height: 100vh;
    }
</style>